<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Circle节点分组</title>
</head>
<body>
<div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script>
  /** 
   * 该案例演示以下功能：
   *  1、渲染群组所需要的数据结构；
   *  2、如何拖动一个群组；
   *  3、将节点从群组中拖出；
   *  4、将节点拖入到某个群组中；
   *  5、拖出拖入节点后动态改变群组大小。
  */
  G6.registerNode('circleNode', {
    drawShape(cfg, group) {
      const keyShape = group.addShape('circle', {
        attrs: {
          x: 0,
          y: 0,
          r: 30,
          fill: '#87e8de'
        }
      });

      return keyShape;
    }
  }, 'circle');
  
  const graph = new G6.Graph({
    container: 'mountNode',
    width: 800,
    height: 600,
    defaultNode: {
      shape: 'circleNode'
    },
    defaultEdge: {
      color: '#bae7ff'
    },
    modes: {
      default: [ 'drag-canvas', 'drag-group', 'drag-node-with-group', 'collapse-expand-group' ]
    }
  });

const oneNodes = []
  for(let i = 0; i < 50; i++) {
    oneNodes.push({
      id: `node-1-${i}`,
      groupId: 'group3',
      label: `node-1-${i}-group3`,
      x: 100 + 5 * i,
      y: 300 + 5 * i,
      shape: 'circle'
    })
  }

  const data = {
      nodes: [
        // ...oneNodes,
        {
          id: 'node6',
          groupId: 'group3',
          label: 'node6-group3',
          x: 100,
          y: 300,
          shape: 'rect'
        },
        {
          id: 'node6-1',
          groupId: 'group3',
          label: 'node6-group3-1',
          x: 110,
          y: 300,
          shape: 'rect'
        },
        {
          id: 'node6-2',
          groupId: 'group3',
          label: 'node6-group3-2',
          x: 120,
          y: 300,
          shape: 'rect'
        },
        {
          id: 'node6-3',
          groupId: 'group3',
          label: 'node6-group3-3',
          x: 140,
          y: 300,
          shape: 'rect'
        },
        {
          id: 'node6-4',
          groupId: 'group3',
          label: 'node6-group3-4',
          x: 150,
          y: 300,
          shape: 'rect'
        },
        {
          id: 'node6-5',
          groupId: 'group3',
          label: 'node6-group3-5',
          x: 160,
          y: 300,
          shape: 'rect'
        },
        {
          id: 'node1',
          label: 'node1-group1',
          groupId: 'group1',
          x: 100,
          y: 100
        },
        {
          id: 'node9',
          label: 'node9-p1',
          groupId: 'p1',
          x: 300,
          y: 210
        },
        {
          id: 'node2',
          label: 'node2-group2',
          groupId: 'group1',
          x: 150,
          y: 200
        },
        {
          id: 'node3',
          label: 'node3-group2',
          groupId: 'group2',
          x: 300,
          y: 100
        },
        {
          id: 'node7',
          groupId: 'p1',
          label: 'node7-p1',
          x: 200,
          y: 200
        },
        {
          id: 'node10',
          label: 'node10-p2',
          groupId: 'p2',
          x: 300,
          y: 210
        }
      ],
      edges: [
        {
          source: 'node1',
          target: 'node2'
        },
        {
          source: 'node2',
          target: 'node3'
        },
        {
          source: 'node1',
          target: 'node3'
        },
        {
          source: 'node6',
          target: 'node1'
        }
      ],
      groups: [
        {
          id: 'group1',
          title: {
            text: '我的群组1',
            stroke: '#444',
            offsetX: -20,
            offsetY: 30
          },
          parentId: 'p1'
        },
        {
          id: 'group2',
          title: '2',
          parentId: 'p1'
        },
        {
          id: 'group3',
          title: {
            text: '群组2',
            stroke: '#444',
            offsetX: -20,
            offsetY: 30
          },
          parentId: 'p2'
        },
        {
          id: 'p1',
          title: '3'
        },
        {
          id: 'p2',
          title: '3'
        }
      ]
    };

  graph.data(data)
  graph.render()

</script>
</body>
</html>
